import React, { forwardRef, useImperativeHandle, useState } from 'react'

// 4. 设置组件的形参, 接收 ref 数据
function Child(props, ref) {
  //定义状态
  let [count, setCount] = useState(0);
  // 5. 在 ref 数据的身上添加功能
  useImperativeHandle(ref, () => {
    return {
      //增加功能
      incre: () => {
        setCount(v => v + 1);
      },
      //减少功能
      decre: () => {
        setCount(v => v - 1);
      }
    }
  })
  return (
    <div>
      <h2>{count}</h2>
    </div>
  )
}

// 3. 调整暴露的写法
export default forwardRef(Child);
